<template>
  <ul class="list" >
	<li class="item"
	@click="handlerClick" 
	@touchstart="hanldeTouchStart"
	@touchmove="hanldeTouchMove"
	@touchend="hanldeTouchEnd"
	v-for="(item,index) of cityData.cities"
	:ref="index"
	>{{index}}</li>
  </ul>
</template>

<script>

export default {
  name: 'CityAlphabet',
  props: {
  	cityData: Object
  },
  data: function(){
  	return {
  		touchStatus: false,
  		startY: 0,

  	}
  },
  computed: {
  	letters: function(){
  		const letters = [];
  		for(let i in this.cityData.cities){
  			letters.push(i);
  		}
  		return letters;
  	} 	
  },
  updated: function(){
  	this.startY = this.$refs['A'][0].offsetTop;
  },
  methods: {
  	handlerClick: function(e){
  		this.$emit('change',e.target.innerHTML);
  	},
  	hanldeTouchStart: function(e){
  		this.touchStatus = true;
  	},
  	hanldeTouchMove: function(e){
  		if(this.touchStatus){
  			const touchY = e.touches[0].clientY - 79;
  			const index = Math.floor((touchY- this.startY)/20);
  			if(index >= 0 && index <= this.letters.length)
  			this.$emit('change',this.letters[index]);

  			console.log(index)
  		}
  	},
  	hanldeTouchEnd: function(e){

  	}
  }
}
</script>

<style lang="stylus" scoped>
	@import '~styles/varibles.styl'
	.list
		position: absolute;
		top: 1.5rem;
		bottom: 0px;
		right: 0px;
		width: .4rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		line-height: .4rem;
		color: $bgColor;	
</style>
